<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";
const sharedData = ref({
  userId: '2',
  username: '2',
  age: '2',
  phone: '2',
  password: '2',
  repeatPassword: '2'
});
const formRef = ref(null)
const router = useRouter();

function signUp() {
  formRef.value.validate((valid) => {
    if (valid) {
      axios.post("/api/new_account", sharedData.value).then((res) => {
        if (res.data.status === 0) {
          ElMessage({ message: "注册成功", type: "success" })
        }
      })
    }
    else {
      ElMessage({ message: "注册失败,请检查输入信息", type: "warning" })
    }
  })
}
// 定义重复密码验证函数
const validateRepeatPassword = (rule, value, callback) => {
  if (value === sharedData.value.password) {
    callback();
  } else {
    callback(new Error('两次输入的密码不一致'));
  }
}
// rules
const rules = {
  repeatPassword: [
    { validator: validateRepeatPassword, trigger: ['blur', 'change'] },
  ]
}
</script>
<template>
  <div class="accountContainer">
    <el-form class="form-card" ref="formRef" :model="sharedData" :rules="rules" @submit.prevent="signUp()">
      <div class="table-title1">Register</div>
      <el-form-item label="用户名" label-position="left" label-width="130px" prop="userId">
        <el-input v-model="sharedData.userId" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="昵称" label-position="left" label-width="130px" prop="username">
        <el-input v-model="sharedData.username" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="年龄" label-position="left" label-width="130px" prop="age">
        <el-input v-model="sharedData.age" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="手机号" label-position="left" label-width="130px" prop="phone">
        <el-input v-model="sharedData.phone" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-position="left" label-width="130px" prop="password">
        <el-input v-model="sharedData.password" type="password" class="form-input" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" label-position="left" label-width="130px" prop="repeatPassword">
        <el-input v-model="sharedData.repeatPassword" class="form-input" show-password></el-input>
      </el-form-item>
      <el-button type="primary" class="submit-btn" @click="signUp()">Register</el-button>
      <div class="link-container">
        <router-link to="/welcome/login" class="link-item">Login</router-link>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.form-card {
  width: 450px;
  padding: 40px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.table-title1 {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-bottom: 30px;
}

.form-input {
  width: 100%;
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
  height: 45px;
  font-size: 16px;
}

.link-container {
  margin-top: 20px;
  text-align: center;
}

.link-item {
  color: #409EFF;
  text-decoration: none;
  font-size: 14px;
}

.link-item:hover {
  text-decoration: underline;
}
</style>